.contentWrapper {
  display: flex;
  width: 100%;
  position: relative;
/*
  // Light mode background
  background-color: #f7fafc; // gray.50

  // Dark mode background
  [data-theme="dark"] &,
  .chakra-ui-dark & {
    background-color: #1a202c; // gray.800
  }
  */
}

// Filter panel styles
.filterPanel {
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-height: calc(100vh - 80px); // Adjust as needed based on your layout
  transition: width 0.3s ease;
  border: none;

  // Light mode background
  /*background-color: #f7fafc; // gray.50

  // Dark mode background
  [data-theme="dark"] &,
  .chakra-ui-dark & {
    background-color: #1a202c; // gray.800
  }*/
}

// Cluster list styles
.clusterList {
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

.cardWrapper {
  margin-top: rem(16);
  display: flex;

  .table {
    margin-top: 0;
    .rowLabel,
    .rowValue {
      padding-top: rem(8) !important;
      padding-bottom: rem(8) !important;
      padding-left: rem(8) !important;
    }
    .rowLabel {
      background-color: var(--quaternary-color);
    }
  }
}
/*.cardWrapper {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
}*/

.card {
  height: 100%;
  border: none;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.btnHeading {
  width: 100%;
  padding: 10px;
  //transition: background-color 0.2s ease;
  border-bottom: none;
  /*&:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }*/
}

.cardHeaderText {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Filter component styles
.dropdownButton {
  width: 100%;
  margin-bottom: 10px;
}

.searchBox {
  width: 100%;
  margin-bottom: 10px;
}

// Main content area
.mainContent {
  transition: all 0.3s ease;
  width: 100%;
}

// Responsive styles
@media (max-width: 1200px) {
  .filterPanel {
    position: fixed;
    height: 100vh;
    overflow-y: auto;
  }
}
